<template>
    <tm-app class="app" bgImg="f5">
        <view
            style="position: fixed; top: 0; width: 750rpx; background: #fff"
            :style="{ height: systemInfo.statusBarHeight + 'px' }"
        ></view>
        <view
            class="header"
            :style="{ top: systemInfo.statusBarHeight + 'px' }"
        >
            <image
                src="../../static/firends/right.png"
                @tap="goBack"
                class="right"
            ></image>
            <text class="firend">更多</text>
            <view></view>
        </view>

        <view
            class="content"
            :style="{ top: `calc(100rpx + ${systemInfo.statusBarHeight}px)` }"
        >
            <view class="slim_box">
                <view
                    class="row noactive d-flex a-center j-between"
                    v-if="from === 'chat'"
                >
                    <text class="text">置顶聊天</text>
                    <tm-switch
                        linear="left"
                        linearDeep="accent"
                        v-model="isPinned"
                        :defaultValue="isPinned"
                        @change="handlePinChange"
                        color="rgba(15, 95, 70, 0.30)"
                        :barColor="
                            isPinned
                                ? 'rgba(35, 226, 166, 1)'
                                : 'rgba(195, 204, 202, 1)'
                        "
                        barIcon=""
                        size="normal"
                    ></tm-switch>
                </view>

                <view
                    class="row noactive d-flex a-center j-between"
                    v-if="from === 'chat'"
                >
                    <text class="text">消息免打扰</text>
                    <tm-switch
                        linear="left"
                        linearDeep="accent"
                        v-model="isMute"
                        :defaultValue="isMute"
                        @change="handleMuteChange"
                        color="rgba(15, 95, 70, 0.30)"
                        :barColor="
                            isMute
                                ? 'rgba(35, 226, 166, 1)'
                                : 'rgba(195, 204, 202, 1)'
                        "
                        barIcon=""
                        size="normal"
                    ></tm-switch>
                </view>
				<view
				    v-if="from === 'chat'"
				    class="row d-flex a-center j-between"
				    @tap="goPersonal"
				>
				    <text class="text">查看个人主页</text>
				    <i
				        class="icon icon-more-2"
				        style="color: #999; font-size: 20rpx"
				    ></i>
				</view>
				<!--
                <view
                    class="row d-flex a-center j-between"
                    v-if="from === 'chat'"
                    @tap="openDelMsg"
                >
                    <text class="text">清空聊天记录</text>
                    <i
                        class="icon icon-more-2"
                        style="color: #999; font-size: 20rpx"
                    ></i>
                </view>
				-->
                <!-- <view
                    class="row d-flex a-center j-between"
                    v-if="from === 'chat'"
                >
                    <text class="text">查找聊天记录</text>
                    <i
                        class="icon icon-more-2"
                        style="color: #999; font-size: 20rpx"
                    ></i>
                </view> -->

                <view
                    class="row d-flex a-center j-between"
                    v-if="isFriend"
                    @tap="goEdit"
                >
                    <text class="text">备注</text>

                    <view class="d-flex a-center">
                        <text
                            v-if="remark"
                            style="
                                font-size: 28rpx;
                                color: #333;
                                margin-right: 10rpx;
                            "
                            >{{ remark }}</text
                        >
                        <text
                            v-if="!remark"
                            style="
                                font-size: 28rpx;
                                color: #999;
                                margin-right: 10rpx;
                            "
                            >未设置</text
                        >
                        <i
                            class="icon icon-more-2"
                            style="color: #999; font-size: 20rpx"
                        ></i>
                    </view>

                    <!-- <input
                        style="width: 500rpx"
                        class="inp"
                        @blur="UpdateFriend"
                        v-model="remark"
                        placeholder-style="color:#ccc"
                        placeholder="未备注"
                        type="text"
                    /> -->
                </view>

                <view class="row noactive d-flex a-center j-between">
                    <text class="text">加入黑名单</text>
                    <tm-switch
                        linear="left"
                        linearDeep="accent"
                        v-model="inBlack"
                        :defaultValue="inBlack"
                        @change="handleBlackChange"
                        color="rgba(15, 95, 70, 0.30)"
                        :barColor="
                            inBlack
                                ? 'rgba(35, 226, 166, 1)'
                                : 'rgba(195, 204, 202, 1)'
                        "
                        barIcon=""
                        size="normal"
                    ></tm-switch>
                </view>
				<view
				    class="row d-flex a-center j-between"
				    v-if="from === 'chat'"
				    @tap="openDelMsg"
				>
				    <text class="text">清空聊天记录</text>
				    <i
				        class="icon icon-more-2"
				        style="color: #999; font-size: 20rpx"
				    ></i>
				</view>
				<!--
                <view
                    v-if="from === 'chat'"
                    class="row d-flex a-center j-between"
                    @tap="goPersonal"
                >
                    <text class="text">查看个人主页</text>
                    <i
                        class="icon icon-more-2"
                        style="color: #999; font-size: 20rpx"
                    ></i>
                </view>
				-->
                <view
                    class="row d-flex a-center j-between"
                    @tap="onLinkcomplaint"
                >
                    <text class="text">投诉</text>
                    <i
                        class="icon icon-more-2"
                        style="color: #999; font-size: 20rpx"
                    ></i>
                </view>
            </view>

            <view
                v-if="from !== 'chat'"
                class="btn d-flex a-center j-center"
                style="margin-top: 40rpx"
                v-show="isFriend"
                @tap="openPopup"
            >
                <text class="text">删除好友</text>
            </view>
        </view>

        <uni-popup
            ref="popup"
            :safe-area="false"
            background-color="transpartent"
            @change="popupChange"
        >
            <view class="sys-confirm-content">
                <view class="confirm-content-title"
                    >将解除与"{{ friendProfile.profile.nick }}"好友关系？</view
                >
                <view class="confirm-content-tip">
                    <view class="content-tip-row" style="color: #cc3300"
                        >同时删除与该联系人的聊天记录</view
                    >
                </view>
                <view
                    @tap="handleDelFriend"
                    class="content-button button-confirm"
                    style="color: #1dc691"
                    >确认</view
                >
                <view style="height: 20rpx; background: #f5f5f5"></view>
                <view
                    @tap="popup.close()"
                    class="content-button"
                    style="color: #999999"
                    >取消</view
                >
            </view>

            <!-- <view class="popup-content1">
                <view class="desp text1"
                    >将解除与"{{
                        friendProfile.profile.nick
                    }}"好友关系?</view
                >
                <view class="desp text2">
                    同时删除与该联系人的聊天记录
                </view>
                <view
                    class="row d-flex a-center j-center error"
                    @tap="handleDelFriend"
                    >删除联系人</view
                >
                <view style="height: 20rpx; background: #f5f5f5"></view>
                <view
                    class="row d-flex a-center j-center cancel"
                    @tap="closePopup"
                    >取消</view
                >
            </view> -->
        </uni-popup>
        <uni-popup
            ref="blackPopup"
            background-color="transpartent"
            :safe-area="false"
            type="bottom"
        >
            <view class="sys-confirm-content">
                <view class="confirm-content-title"
                    >确认将"{{ friendProfile.profile.nick }}"加入黑名单？</view
                >
                <view class="confirm-content-tip">
                    <view class="content-tip-row" style="color: #cc3300"
                        >同时删除与该联系人的聊天记录</view
                    >
                </view>
                <view
                    @tap="handleAddBlack"
                    class="content-button button-confirm"
                    style="color: #1dc691"
                    >确认</view
                >
                <view style="height: 20rpx; background: #f5f5f5"></view>
                <view
                    @tap="blackPopup.close()"
                    class="content-button"
                    style="color: #999999"
                    >取消</view
                >
            </view>

            <!-- <view class="popup-content1">
                <view class="desp"
                    >确认将"{{
                        friendProfile.profile.nick
                    }}"加入黑名单，同时删除与该联系人的聊天记录？</view
                >
                <view
                    class="row d-flex a-center j-center error"
                    @tap="handleAddBlack"
                    >加入黑名单</view
                >
                <view style="height: 20rpx; background: #f5f5f5"></view>
                <view
                    class="row d-flex a-center j-center cancel"
                    @tap="blackPopup.close()"
                    >取消</view
                >
            </view> -->
        </uni-popup>

        <uni-popup
            ref="popupDelMsg"
            :safe-area="false"
            type="bottom"
            background-color="transparent"
        >
            <view class="sys-confirm-content">
                <view class="confirm-content-title">
                    确认删除
                    <text>{{ remark || friendProfile.profile.nick }}</text>
                    的聊天记录？
                </view>
                <!-- <view class="confirm-content-tip">
					<view class="content-tip-row" style="color: #cc3300;">同时删除与该联系人的聊天记录</view>
				</view> -->
                <view
                    @tap="clearConversion"
                    class="content-button button-confirm"
                    style="color: #1dc691"
                    >确认</view
                >
                <view style="height: 20rpx; background: #f5f5f5"></view>
                <view
                    @tap="popupDelMsg.close()"
                    class="content-button"
                    style="color: #999999"
                    >取消</view
                >
            </view>

            <!-- <view class="popup-content1">
                <view class="desp d-flex a-center">
                    确认删除
                    <text class="text_main">{{ remark||friendProfile.profile.nick }}</text>
                    的聊天记录？
                </view>
                <view
                    class="row d-flex a-center j-center error"
                    @tap="clearConversion"
                    >确认</view
                >
                <view style="height: 20rpx; background: #f5f5f5"></view>
                <view
                    class="row d-flex a-center j-center cancel"
                    @tap="popupDelMsg.close()"
                    >取消</view
                >
            </view> -->
        </uni-popup>

        <tm-message
            ref="msg"
            :width="400"
            :height="110"
            color="#9F9F9F"
            :round="6"
            :padding="[0, 0, 0, 0]"
            :margin="[0, 0, 0, 0]"
            :lines="2"
        ></tm-message>
    </tm-app>
</template>
<script lang="ts" setup>
import { ref, computed, nextTick } from "vue";
import {
    onReady,
    onShow,
    onHide,
    onBackPress,
    onLoad,
    onUnload,
    onPageScroll,
} from "@dcloudio/uni-app";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { userData as userDataStore } from "@/store/userData";
import { imStore } from "@/store/imStore";
import { queryUser, removelahei, pinbilahei } from "@/api/api";
import { getUserDetail1 } from "@/api/api";
import {
    handleJumpToChat,
    getUserProfile,
    delFriend,
    checkFriend,
    addFriend,
    getFriendProfile,
    updateFriend,
    getBlacklist,
    addToBlacklist,
    removeFromBlacklist,
    clearHistoryMessage,
} from "@/hooks/imHooks";

import { showLoading, closeLoading, wait } from "@/utils/utils";
const systemInfo: any = systemInfoStore();
const userData: any = userDataStore();
const IM_STORE: any = imStore();
const msg = ref(null);
const userId = ref(null);
const from = ref("");
//10000013

const isPinned = ref(false);
const isMute = ref(false);

const goEdit = () => {
    uni.navigateTo({
        url: `/pages/publicEdit/edit?title=修改备注&emit=remarkChange&len=16&text=${
            remark.value || ""
        }`,
    });
};

const inBlack = ref(false);
const blackPopup = ref(null);

const handleBlackChange = async (bool: boolean) => {
    if (bool) {
        blackPopup.value.open();
        nextTick(() => {
            inBlack.value = false;
        });
        return;
    } else {
        await removeFromBlacklist([userId.value]);
        await removelahei({
            userId: userData.id,
            typeKey: 2,
            typeValue: userId.value,
        });
        uni.$emit("inBlackChange", false);
        inBlack.value = false;
    }

    // if (bool) {
    //     await addToBlacklist([userId.value]);
    //     inBlackList.value = true;
    //     uni.$emit("inBlackChange", true);
    // }
};

const handleAddBlack = async () => {
    blackPopup.value.close();
    await addToBlacklist([userId.value]);
    await pinbilahei({
        userId: userData.id,
        typeKey: 2,
        typeValue: userId.value,
    });
    inBlackList.value = true;
    uni.$emit("inBlackChange", true);
    inBlack.value = true;
};

const handleConversation = (type: string, item?: any) => {
    switch (type) {
        case "ispinned":
            if (type === "ispinned") {
                const options: any = {
                    conversationID: IM_STORE.conversation.conversationID,
                    isPinned: true,
                };
                uni.$TUIKit.TUIConversationServer.pinConversation(options).then(
                    (imResponse: any) => {
                        //console.log(imResponse);
                    }
                );
            }
            break;
        case "dispinned":
            if (type === "dispinned") {
                const options: any = {
                    conversationID: IM_STORE.conversation.conversationID,
                    isPinned: false,
                };
                uni.$TUIKit.TUIConversationServer.pinConversation(options).then(
                    (imResponse: any) => {}
                );
            }
            break;
        case "mute":
            if (type === "mute") {
                const options: any = {
                    userIDList: [userId.value],
                    messageRemindType: uni.$TIM.TYPES.MSG_REMIND_ACPT_NOT_NOTE,
                };
                uni.$TUIKit.TUIConversationServer.muteConversation(
                    options
                ).then((imResponse: any) => {
                    //console.log(imResponse);
                });
            }
            break;
        case "notMute":
            if (type === "notMute") {
                const options: any = {
                    userIDList: [userId.value],
                    messageRemindType: uni.$TIM.TYPES.MSG_REMIND_ACPT_AND_NOTE,
                };
                uni.$TUIKit.TUIConversationServer.muteConversation(
                    options
                ).then((imResponse: any) => {
                    //console.log(imResponse);
                });
            }
            break;
    }
};

const handlePinChange = async (bool: boolean) => {
    isPinned.value = bool;
    if (bool) {
        handleConversation("ispinned");
    } else {
        handleConversation("dispinned");
    }
};
const handleMuteChange = async (bool: boolean) => {
    isMute.value = bool;
    if (bool) {
        handleConversation("mute");
    } else {
        handleConversation("notMute");
    }
};

const inBlackList = ref(false);
const userDetail = ref({});
const plaintDetail = ref(null);
const getDetail = async (userId: string) => {
    const res: any = await getUserDetail1({ id: userId });
    const { flag, data } = res;
    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: "获取胖友详情失败",
            duration: 1500,
        });
        return;
    }

    console.log("uuuuuuuuu");
    console.log(data);

    userDetail.value = data;
};

const friendProfile = ref({});

const remark = ref("");

const GetFriendProfile = async (userId: string) => {
    if (!uni.$chat_isSDKReady) {
        setTimeout(() => {
            GetFriendProfile(userId);
        }, 200);
        return;
    }

    const res: any = await getFriendProfile([userId]);

    const { code, data } = res;

    if (code !== 0 || !data.friendList.length) {
        // msg.value.show({
        //     duration: "2000",
        //     showIcon: false,
        //     mask: false,
        //     dark: true,
        //     text: "获取胖友信息失败",
        // });
        return;
    }

    friendProfile.value = data.friendList[0];
    remark.value = data.friendList[0].remark;
};

const GetBlacklist = async () => {
    if (!uni.$chat_isSDKReady) {
        setTimeout(() => {
            GetBlacklist();
        }, 200);
        return;
    }

    const res: any = await getBlacklist();

    const { code, data } = res;

    if (code !== 0) {
        return;
    }

    if (data.includes(userId.value)) {
        inBlackList.value = true;
        inBlack.value = true;
    }
};

const popup = ref(null);

const openPopup = () => {
    popup.value.open("bottom");
};

const closePopup = () => {
    popup.value.close();
};

const popupChange = async (e) => {
    console.log(e);
};

const UpdateFriend = async () => {
    const IM_STORE = imStore();
    IM_STORE.conversation.remark = remark.value;
    //setConversation
    IM_STORE.setConversation(IM_STORE.conversation);
    await updateFriend({
        userId: friendProfile.value.userID,
        remark: remark.value,
    });
};

const goBack = () => {
    uni.navigateBack();
};

const goPersonal = () => {
    uni.navigateTo({
        url: `/pages/personalCenter/personalCenter?userId=${userId.value}`,
    });
};

const contactUser = () => {
    handleJumpToChat(`C2C${userDetail.value.id}`);
};

const checked = ref(false);
const isFriend = ref(false);

const check = async (userId: string) => {
    if (!uni.$chat_isSDKReady) {
        setTimeout(() => {
            check(userId);
        }, 200);
        return;
    }

    const res: any = await checkFriend([userId]);
    const { code, data } = res;
    if (code !== 0) {
        uni.showToast({
            icon: "none",
            title: "检查胖友关系失败~",
            duration: 1500,
        });

        return;
    }

    console.log(data);

    checked.value = true;

    if (
        data.successUserIDList[0].relation ===
            uni.$TIM.TYPES.SNS_TYPE_BOTH_WAY ||
        data.successUserIDList[0].relation === uni.$TIM.TYPES.SNS_TYPE_A_WITH_B
    ) {
        isFriend.value = true;
    } else {
        isFriend.value = false;
    }
};

const handleAddFirend = async () => {
    const obj = {
        userId: userDetail.value.id,
        wording: "",
        remark: "",
        source: "Preview",
    };
    const res: any = await addFriend(obj);
    const { code, data } = res;
    if (code !== 0) {
        uni.showToast({
            icon: "none",
            title: "申请添加好友失败，请稍后再试~",
            duration: 1500,
        });
        return;
    }

    uni.showToast({
        icon: "none",
        title: "已成功添加对方为好友~",
        duration: 1500,
    });
};

const handleDelFriend = async () => {
    popup.value.close();
    showLoading();

    const options: any = {
        userIDList: [friendProfile.value.userID],
        messageRemindType: uni.$TIM.TYPES.MSG_REMIND_ACPT_AND_NOTE,
    };
    await uni.$TUIKit.TUIConversationServer.muteConversation(options);

    const res = await delFriend([friendProfile.value.userID]);

    closeLoading();

    if (res.code === 0) {
        const IM_STORE = imStore();

        IM_STORE.conversationList.forEach((item) => {
            if (
                item.type === "C2C" &&
                item.userProfile.userID === userId.value
            ) {
                uni.$TUIKit.TUIConversationServer.deleteConversation(
                    item.conversationID
                ).then((imResponse: any) => {
                    //const { conversationID } = imResponse.data;
                });
            }
        });

        setTimeout(() => {
            uni.showToast({
                icon: "none",
                title: "已删除联系人及会话",
                duration: 1500,
            });
            uni.switchTab({
                url: "/pages/quanzi/quanzi",
            });
            /* #ifndef H5 */
            // const pages = getCurrentPages();
            // const length = pages.length;
            // const parentView = pages[length - 2].$getAppWebview();
            // parentView.close();
            /*#endif*/
            //goBack();
        }, 0);
    } else {
        uni.showToast({
            icon: "none",
            title: "删除联系人失败",
            duration: 1500,
        });
    }
};

const allowType = ref("");

const checkAddFriend = async () => {
    const res: any = await getUserProfile([userDetail.value.id]);
    console.log(res.data[0].allowType);
    // AllowType_Type_AllowAny
    // AllowType_Type_DenyAny
    if (res.code === 0) {
        allowType.value = res.data[0].allowType;
    }

    if (allowType.value === "AllowType_Type_AllowAny") {
        handleAddFirend();
    } else if (allowType.value === "AllowType_Type_DenyAny") {
        uni.showToast({
            icon: "none",
            title: "对方不允许任何人添加其为好友",
            duration: 1500,
        });
    } else {
        goApplayForFriend();
    }
};

const goApplayForFriend = () => {
    uni.navigateTo({
        url: `/pages/addFriend/applyforFriend?userId=${userDetail.value.id}`,
    });
};

const popupDelMsg = ref(null);

const openDelMsg = () => {
    popupDelMsg.value.open();
};

const clearConversion = async () => {
    const conversationId = `C2C${userDetail.value.id}`;

    console.log(userDetail.value);

    console.log(conversationId);
    console.log(IM_STORE.conversation);

    popupDelMsg.value.close();

    const res: any = await clearHistoryMessage(conversationId);
    const { code, data } = res;
    if (code !== 0) {
        uni.showToast({
            icon: "none",
            title: "删除聊天记录失败,请稍后再试",
            duration: 1500,
        });
        return;
    }

    uni.showToast({
        icon: "none",
        title: "聊天记录已清除",
        duration: 1500,
    });

    IM_STORE.setIsCompleted(true);

    IM_STORE.setMessageList([]);
    uni.$emit('clearListContentHeight');

    //clearHistoryMessage
};

const remarkChange = (str: string) => {
    remark.value = str;
    UpdateFriend();
};

onBackPress(() => {
    if (isFriend.value) {
        UpdateFriend();
    }
});

const Check1 = () => {
    check(userId.value);
};

onLoad(async (option: any) => {
    plaintDetail.value = option;

    if (option.from) {
        from.value = option.from;
    }

    isPinned.value = !!IM_STORE.conversation?.isPinned;
    isMute.value =
        IM_STORE.conversation?.messageRemindType === "AcceptNotNotify";

    if (option.userId) {
        userId.value = option.userId;
        getDetail(option.userId);
        check(option.userId);
        GetBlacklist();
        GetFriendProfile(option.userId);
        uni.$on("friendUpdate", Check1);
        uni.$on("remarkChange", remarkChange);
    }
});

onUnload(() => {
    uni.$off("friendUpdate", Check1);
    uni.$off("remarkChange", remarkChange);
});

// 跳转投诉页面
const onLinkcomplaint = () => {
    console.log(plaintDetail.value);
    uni.navigateTo({
        url: `/pages/complaint/complaint?groupId=${userDetail.value.id}&groupName=${userDetail.value.nickName}&target=user  `,
    });
};
</script>
<style lang="scss" scoped>
.app {
    .header {
        position: fixed;
        width: 750rpx;
        z-index: 10;
        top: 0;
        left: 0;
        padding: 0 30rpx;
        display: flex;
        height: 100rpx;
        align-items: center;
        justify-content: space-between;
        height: 100rpx;
        // position: absolute;
        // top: 0;
        // left: 0;
        width: 750rpx;
        background-color: #ffffff;

        .right {
            width: 48rpx;
            height: 48rpx;
        }

        .firend {
            font-size: 34rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: #000000;
        }
    }

    .search_box {
        width: 750rpx;
        position: fixed;
        background: #fff;
        padding: 20rpx 30rpx;
        height: 100rpx;

        .search {
            width: 600rpx;
            height: 60rpx;
            border-radius: 30rpx;
            background: #f5f5f5;
            padding: 0 30rpx;

            .inp {
                width: 570rpx;
                margin-left: 20rpx;
                font-size: 25rpx;
            }
        }

        .text_btn {
            text-align: right;
            color: #1dc691;

            &:active {
                opacity: 0.7;
            }
        }
    }

    .content {
        position: absolute;
        width: 750rpx;
        bottom: 0;
        left: 0;
        padding-top: 20rpx;
        padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
        padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);

        .add {
            position: absolute;
            right: 20rpx;
            width: 192rpx;
            height: 60rpx;
            background: linear-gradient(270deg, #4ee5c8 0%, #1fc994 100%);
            border-radius: 40rpx;
            font-size: 28rpx;
            color: #fff;

            &:active {
                opacity: 0.7;
            }
        }

        .liao-user {
            position: absolute;
            right: 20rpx;
            width: 192rpx;
            height: 60rpx;
            border-radius: 40rpx;
            border: 2rpx solid #1dc691;
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #1dc691;
            display: flex;
            align-items: center;
            justify-content: center;

            .mes {
                font-size: 40rpx;
                margin-right: 10rpx;
            }

            &:active {
                opacity: 0.7;
            }
        }

        .sign {
            padding: 0 20rpx;
            background: #fff;
            padding-bottom: 20rpx;
            color: #999;
            font-size: 28rpx;
        }
    }

    .btn {
        width: 690rpx;
        height: 80rpx;
        border-radius: 20rpx;
        border: 1px solid #1dc691;
        color: #1dc691;
        margin: 0 auto;
        .text {
            font-weight: 600;
        }
    }

    .popup-content1 {
        width: 750rpx;
        border-top-left-radius: 20rpx;
        border-top-right-radius: 20rpx;
        overflow: hidden;
        background: #fff;
        padding-top: 40rpx;

        .desp {
            color: #999;
            font-size: 26rpx;
            line-height: 40rpx;
            padding: 0 30rpx;
            margin-top: 10rpx;
            &.text1 {
                font-weight: 600;
                color: #333;
            }
            &.text2 {
                padding-left: 60rpx;
                color: red;
            }
        }

        .row {
            height: 100rpx;
        }

        .cancel {
            color: $slim-text3;
        }
    }
}
</style>    